import React,{Component} from 'react';
import './detail.css';
import {queryDetail} from "../../api/news";
import qs from 'qs'
import UcSkeleton from "../../components/skeleton/uc-skeleton";
import NavBar from "../../components/nav-bar";
import history from '../../assets/img/history.png'
import formatTime from '../../utils/formatTime'

export default class Detail extends Component {

  state = {
    detail:{},
    loading:true
  };

  async componentDidMount(){
    let _id = this.props.match.params._id;
    let collectionName = qs.parse(this.props.location.search,{ignoreQueryPrefix: true}).collectionName;
    // console.log(_id, collectionName)
    let {data:detail} = await queryDetail({_id,collectionName})
    this.setState({detail,loading:false})
  }
  render(){
    let {detail,loading} = this.state;
    if (detail.title){
      var {detail:{auth_icon,auth,content},title,time} = detail
    }
    return (
      <UcSkeleton
        loading={loading}
      >
        <NavBar
          onLeftClick={()=>this.props.history.go(-1)}
          icon={<img src={history} alt=''/>}
          mode="light"
        />

        <div className="content">
          <div className="header clear"><h2><img src={auth_icon} alt=""/></h2><p>{auth}</p></div>
          <div className="cont">
            <h3>{title}</h3>
            <div className="time"><p>{formatTime(time)}<span><img src={require('../../assets/img/zan.png').default} alt=""/></span></p>
            </div>
            <div className="text-box" dangerouslySetInnerHTML={{__html:content}}></div>
          </div>
        </div>

        <div className="foot-btn">
          <ul>
            <li className="say"><a href="#say">
              <i></i><span>0</span>
            </a></li>
            <li className="zan"><a href="#zan">
              <i></i><span>0</span>
            </a></li>
            <li className="xing"><a href="#xing">
              <i><img src={require('../../assets/img/xing.png').default} alt=""/></i>
            </a></li>
            <li className="fx"><a href="#fx">
              <i><img src={require('../../assets/img/fx.png').default} alt=""/></i>
            </a></li>
          </ul>
        </div>
      </UcSkeleton>
    )
  }
}